/* eslint-disable @typescript-eslint/no-explicit-any */
import {
  Button,
  Form,
  Input,
  Select,
  Table,
  type TableColumnsType,
  type TableProps,
} from "antd";
import React, { useState } from "react";
import "./institution.scss";

export default function Institution() {
  const [form] = Form.useForm();
  const onFinish = (values: any) => {
    console.log("Finish:", values);
  };
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };
  type TableRowSelection<T extends object = object> =
    TableProps<T>["rowSelection"];

  interface DataType {
    key: React.ReactNode;
    number: number;
    orgCode: string;
    orgName: string;
    sort: number;
    status: string;
    remark?: string;
    children?: DataType[];
  }

  const columns: TableColumnsType<DataType> = [
    {
      title: "序号",
      dataIndex: "number",
      key: "number",
      width: 80,
    },
    {
      title: "组织编号",
      dataIndex: "orgCode",
      key: "orgCode",
      width: 120,
    },
    {
      title: "组织名称",
      dataIndex: "orgName",
      key: "orgName",
      width: 200,
    },
    {
      title: "排序",
      dataIndex: "sort",
      key: "sort",
      width: 80,
    },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      width: 100,
      render: (status: string) => (
        <span style={{ color: status === "启用" ? "#52c41a" : "#ff4d4f" }}>
          {status}
        </span>
      ),
    },
    {
      title: "备注",
      dataIndex: "remark",
      key: "remark",
      width: 150,
    },
    {
      title: "操作",
      key: "action",
      width: 120,
      render: () => (
        <span style={{ fontSize: "14px" }}>
          <a href="#" style={{ marginRight: "10px", color: "#1890ff" }}>
            编辑
          </a>
          <a href="#" style={{ color: "#ff4d4f" }}>
            删除
          </a>
        </span>
      ),
    },
  ];

  const data: DataType[] = [
    {
      key: 1,
      number: 1,
      orgCode: "ZZBH8822",
      orgName: "振涛教育",
      sort: 1,
      status: "启用",
      children: [
        {
          key: 2,
          number: 2,
          orgCode: "ZZBH908",
          orgName: "研发部门",
          sort: 1,
          status: "停用",
          children: [
            {
              key: 3,
              number: 3,
              orgCode: "ZZBH1689",
              orgName: "软件开发部门",
              sort: 1,
              status: "启用",
            },
            {
              key: 4,
              number: 4,
              orgCode: "ZZBH2664",
              orgName: "Java开发",
              sort: 2,
              status: "启用",
              children: [
                {
                  key: 41,
                  number: 5,
                  orgCode: "ZZBH2665",
                  orgName: "后端开发组",
                  sort: 1,
                  status: "启用",
                },
              ],
            },
            {
              key: 5,
              number: 6,
              orgCode: "ZZBH7109",
              orgName: "移动端开发部",
              sort: 3,
              status: "启用",
            },
          ],
        },
        {
          key: 6,
          number: 7,
          orgCode: "ZZBH1134",
          orgName: "人力资源部门",
          sort: 2,
          status: "启用",
          children: [
            {
              key: 7,
              number: 8,
              orgCode: "ZZBH7685",
              orgName: "招聘部门",
              sort: 1,
              status: "启用",
            },
            {
              key: 8,
              number: 9,
              orgCode: "ZZBH8417",
              orgName: "培训部门",
              sort: 2,
              status: "启用",
            },
          ],
        },
        {
          key: 9,
          number: 10,
          orgCode: "ZZBH9503",
          orgName: "采购部门",
          sort: 3,
          status: "启用",
          children: [
            {
              key: 91,
              number: 11,
              orgCode: "ZZBH9452",
              orgName: "供应管理部门",
              sort: 1,
              status: "启用",
            },
            {
              key: 92,
              number: 12,
              orgCode: "ZZBH1583",
              orgName: "采购计划部门",
              sort: 2,
              status: "启用",
            },
            {
              key: 93,
              number: 13,
              orgCode: "ZZBH6307",
              orgName: "采购执行部门",
              sort: 3,
              status: "启用",
            },
          ],
        },
      ],
    },
  ];

  // rowSelection objects indicates the need for row selection
  const rowSelection: TableRowSelection<DataType> = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        "selectedRows: ",
        selectedRows
      );
    },
    onSelect: (
      record: DataType,
      selected: boolean,
      selectedRows: DataType[]
    ) => {
      console.log(record, selected, selectedRows);
    },
    onSelectAll: (
      selected: boolean,
      selectedRows: DataType[],
      changeRows: DataType[]
    ) => {
      console.log(selected, selectedRows, changeRows);
    },
  };

  const [checkStrictly] = useState(false);
  return (
    <div className="institution-management">
      <div className="search-filter">
        <Form
          form={form}
          name="horizontal_login"
          layout="inline"
          onFinish={onFinish}>
          <Form.Item label="组织" name="username">
            <Input placeholder="请输入组织名称/编号" allowClear />
          </Form.Item>
          <Form.Item label="状态" name="status">
            <Select
              style={{ width: 150 }}
              onChange={handleChange}
              options={[
                { value: "1", label: "启用" },
                { value: "0", label: "停用" },
              ]}
              placeholder="请选择"
            />
          </Form.Item>
          <Form.Item>
            <Button type="default" htmlType="reset">
              重置
            </Button>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
          </Form.Item>
        </Form>
      </div>
      <div className="action-buttons">
        <Button type="primary">新增</Button>
      </div>
      <div className="institution-table">
        <Table
          columns={columns}
          rowSelection={{ ...rowSelection, checkStrictly }}
          dataSource={data}
          pagination={false}
          scroll={{
            x: "max-content",
            y: 400, // 设置表格内容区域的高度，超出时显示垂直滚动条
          }}
          size="middle"
          defaultExpandedRowKeys={[1]}
        />
      </div>
    </div>
  );
}
